import { Link, useNavigate, } from "react-router-dom"
import '../../assets/SettleIn.less';
import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import MyUpload from "../../components/MyUpload";
import { settleIn, tel, shopname } from '../../apis/user'
import {
    Form,
    Input,
    Button,
    Radio,
    message,
} from 'antd';
import qs from "querystring"



function SettleIn() {
    //身份证图片
    const [filePath, setFilePath] = useState('')
    //营业执照
    const [filePathImg, setFilePathImg] = useState('')
    const getFileName = (path) => {
        setFilePath(path)
    }
    const getFileNameImg = (path) => {
        setFilePathImg(path)
    }
    // 手机号验证
    const titleCheckTel = async (value, value2, callback) => {
        // console.log(value2)
        const res = await tel(value2)
        // console.log(res)
        const reg = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35678]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|66\d{2})\d{6}$/
        if (res.data.boo) {
            if (reg.test(value2)) {
                callback()
            } else {
                callback("请输入正确的手机号")
            }
        } else {
            message.error('手机号已经注册')
        }
    }
    //身份证正则
    const titleCheckId = (v1, v2, callback) => {
        const reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
        if (reg.test(v2)) {
            callback()
        } else {
            callback("请输入正确的身份证号")
        }

    }
    //店铺名验证
    const titleCheckName = async (v1, v2, callback) => {
        // console.log(v2)
        const res = await shopname(v2)
        if (!res.data.boo) {
            message.error('该店铺名已注册')
        }
    }
    //获取表单值
    const navigate = useNavigate()
    const onFinish = async (values) => {
        values.idCardImg = filePath
        values.licenceImg = filePathImg
        const shops = qs.stringify(values)
        const res = await settleIn(shops)
        console.log(res)
        if (res.data.result) {
            message.success('注册成功')
            navigate('/login')
        }
    }

    return (
        <div className="main">
            <div className='content'>
                <div className='top'>
                    <div style={{ verticalAlign: 'midd' }}>
                        <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
                    </div>
                    <div><span> 赤兔养车</span></div>
                </div>
                <Form
                    style={{
                        width: '500px'
                    }}
                    size="large"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    layout="horizontal"
                    onFinish={onFinish}
                >
                    <Form.Item label="商铺类型" name='type' required>
                        <Radio.Group>
                            <Radio value="0">充电站 </Radio>
                            <Radio value="1"> 其他</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="店铺名" name='shopName' required rules={[{ validator: titleCheckName }]} >
                        <Input />
                    </Form.Item>
                    <Form.Item label="手机号" name='tel' required rules={[{ validator: titleCheckTel }]}  >
                        <Input />
                    </Form.Item>
                    <Form.Item label="店铺地址" name='address' required >
                        <Input />
                    </Form.Item>
                    <Form.Item label="注册人" name='managerName' required >
                        <Input />
                    </Form.Item>
                    <Form.Item label="身份证号" name='idCard' required rules={[{ validator: titleCheckId }]} >
                        <Input />
                    </Form.Item>
                    <Form.Item label="身份证照片" name="idCardImg" >
                        <MyUpload getFileName={getFileName}></MyUpload>
                    </Form.Item>
                    <Form.Item label="营业执照编号" name='licenceNo' required >
                        <Input />
                    </Form.Item>
                    <Form.Item label="营业执照照片" name="licenceImg">
                        <MyUpload getFileName={getFileNameImg}></MyUpload>
                    </Form.Item>
                    <Form.Item label=" " colon={false} >
                        <Button type="primary" htmlType="submit">立即申请</Button>
                        {/* <Button type="dashed" >使已有账号登录</Button> */}
                        <Link to='/login'>使用已有账号登录</Link>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default SettleIn